import React, { Component } from 'react'
import {View,Text} from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
import {friend,selectedFriend,group,selectedGroup,message,selectedMessage,my,selectedMy} from '../soures/fonts/iconSvg'
import Svg from 'react-native-svg-uri'
import Friend from './friend/home'
import Group from './group/home'
import Message from './message/home'
import My from './my/home'
export default class Tabbar extends Component {
    state = {
        selectedTab:'friend',
        pages:[
            {
                selected:'friend',
                title:'交友',
                renderIcon:() => <Svg width='20' height='20' svgXmlData={friend} />,
                renderSelectedIcon:() => <Svg width='20' height='20' svgXmlData={selectedFriend} />,
                component:<Friend/>
            },
            {
                selected:'group',
                title:'圈子',
                renderIcon:() => <Svg width='20' height='20' svgXmlData={group} />,
                renderSelectedIcon:() => <Svg width='20' height='20' svgXmlData={selectedGroup} />,
                component:<Group/>
            },{
                selected:'message',
                title:'消息',
                renderIcon: () => <Svg width='20' height='20' svgXmlData={message} />,
                renderSelectedIcon:() => <Svg width='20' height='20' svgXmlData={selectedMessage} />,
                component:<Message/>
            },{
                selected:'my',
                title:'我的',
                renderIcon:() => <Svg width='20' height='20' svgXmlData={my} />,
                renderSelectedIcon:() => <Svg width='20' height='20' svgXmlData={selectedMy} />,
                component:<My/>
            }
        ]
    }
    render() {
        let {selectedTab,pages} = this.state
        return (
            <View style={{flex:1,backgroundColor:'#fff'}}>
                <TabNavigator>
                    {
                        pages.map((item,index)=>{
                            return (
                                <TabNavigator.Item
                                    key={index}
                                    selected={selectedTab === item.selected}
                                    title={item.title}
                                    renderIcon={item.renderIcon}
                                    renderSelectedIcon={item.renderSelectedIcon}
                                    onPress={() => this.setState({ selectedTab: item.selected })}
                                    selectedTitleStyle={{
                                        color:'#c863b5'
                                    }}
                                    tabStyle={{
                                        backgroundColor:'#eee',
                                        justifyContent:'center'
                                    }}
                                >
                                    {item.component}
                                </TabNavigator.Item>
                            )
                        })
                    }
                    
                </TabNavigator>
            </View>
        )
    }
}
